﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test page</title>
</head>
<body>
    <form>

        <fieldset id="forms__links">
            <legend>Links</legend>
            <ul>
                <li><a href="win1.html">Win1</a></li>
                <li><a href="win2.html">Win2</a></li>
            </ul>
        </fieldset>

        <fieldset id="forms__text">
            <legend>Text fields</legend>
            <p>
                <label for="input__text">Text Input <abbr title="Required">*</abbr></label>
                <input id="input__text" type="text" placeholder="Text Input">
            </p>
            <p>
                <label for="input__password">Password</label>
                <input id="input__password" type="password" placeholder="Type your Password">
            </p>
            <p>
                <label for="input__search">Search</label>
                <input id="input__search" type="search" placeholder="Enter Search Term">
            </p>
            <p>
                <label for="input__text2">Number Input <abbr title="Required">*</abbr></label>
                <input id="input__text2" type="number" placeholder="Enter a Number">
            </p>
            <p>
                <label for="input__textarea">Textarea</label>
                <textarea id="input__textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
            </p>
        </fieldset>

        <fieldset id="forms__select">
            <legend>Select</legend>
            <label for="select">Select</label>
            <select id="select">
                <optgroup label="Option Group">
                    <option>Option One</option>
                    <option>Option Two</option>
                    <option>Option Three</option>
                </optgroup>
            </select>
        </fieldset>

        <fieldset id="forms__checkbox">
            <legend>Checkboxes</legend>

            <ul class="list list--bare">
                <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
                <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
                <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
            </ul>
        </fieldset>

        <fieldset id="forms__radio">
            <legend>Radio buttons</legend>

            <ul class="list list--bare">
                <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
                <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
                <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
            </ul>
        </fieldset>


        <fieldset id="forms__action">
            <legend>Action buttons</legend>
            <p>
                <input type="submit" value="Input">
                <button type="submit">Button</button>
                <input type="reset" value="Reset">
                <input type="submit" value="Disabled" disabled>
            </p>
        </fieldset>

    </form>
</body>
</html>